<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="ask-container">
      <div class="nav">
        <ul class="flex-box">
          <li class="flex-box" @click="toActivePage(1)" :class="{active:navThisIndex === 1}">专家提问</li>
          <li class="flex-box" @click="toActivePage(2)" :class="{active:navThisIndex === 2}">悬赏提问</li>
        </ul>
      </div>
      <div class="answer-main">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="article_scroller" :noDataText="noDataText">
          <JieDaMain :checkAllState = false :initState = navIndex :postJiedaLists = jieDaData></JieDaMain>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
import JieDaMain from '../components/IndexJieDaMain.vue'
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0,
      stateI: 0,
      dataLength: '',
      navThisIndex: 1,
      noDataText: '没有更多了',
      jieDaData: {
        jieDaLists: '',
        checkAllShow: false,
        loadingShow: true,
        noDataShow: false
      }
    }
  },
  components: {
    TitleBox,
    JieDaMain
  },
  computed: {},
  methods: {
    getJiaDa(page, end) {
      this.$axios
        .get('./data/shanwen-data/jieda-a0' + page + '.json')
        .then(res => {
          // console.log(res.data.resule)
          this.jieDaData.jieDaLists = res.data.result.slice(0, end)
          this.dataLength = res.data.result.length
          this.jieDaData.loadingShow = false
          if (!res.data.result.length) {
            this.jieDaData.noDataShow = true
            this.noDataText = ''
          } else {
            this.jieDaData.noDataShow = false
            this.noDataText = '没有更多了'
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    refresh() {
      console.log('refresh')
      this.timeout = setTimeout(() => {
        this.$refs.article_scroller.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.stateI++
        this.getJiaDa(this.navThisIndex, 4 * this.stateI)
        if (4 * this.stateI > this.dataLength) {
          this.$refs.article_scroller.finishInfinite(true)
        } else {
          this.$refs.article_scroller.finishInfinite(false)
        }
      }, 1000)
    },
    toActivePage(index) {
      this.navThisIndex = index
      this.jieDaData.loadingShow = true
      this.jieDaData.noDataShow = false
      this.jieDaData.jieDaLists = ''
      this.noDataText = ''
      setTimeout(() => {
        this.getJiaDa(index, 4)
      }, 500)
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;
}
.ask-container {
  width: 100%;
  height: 100%;
  .nav {
    width: 100%;
    height: 48px;
    background: #fff;
    color: #333;
    border-bottom: 8px solid #eee;
    ul {
      height: 100%;
      li {
        font-size: 16px;
        box-sizing: border-box;
        height: 100%;
        position: relative;
        &:first-child {
          margin-right: 24px;
        }
        &.active {
          color: rgb(89, 194, 255);
          &::after {
            width: 100%;
            height: 2px;
            background: rgb(89, 194, 255);
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }
  .answer-main {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
  }
}
</style>
